<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>002_dom增删改</title>
</head>
<body>
    <div class="total">
        <div class="inner">
            <p>你喜欢哪个城市？</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
        </div>
    </div>

    <div id="btnList">
        <div>
            <button id="btn01">创建一个广州节点，添加到#city下</button>
        </div>

        <div>
            <button id="btn02">将广州节点插入到#bj前面</button>
        </div>

        <div>
            <button id="btn03">使用广州节点替换#bj节点</button>
        </div>
        <div>
            <button id="btn04">删除#bj节点</button>
        </div>
        <div>
            <button id="btn05">读取#city内的html代码</button>
        </div>
        <div>
            <button id="btn06">设置#bj内的html代码</button>
        </div>

        <div>
            <button id="btn07">创建一个广州节点，添加到#city下</button>
        </div>
    </div>

<script type="text/javascript">

    myClick('btn01', function () {
        // document.createElement() 可以创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
        var li = document.createElement("li");

        // document.createTextNode 可以用来创建一个文本节点，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
        var gzText = document.createTextNode("广州");

        // appendChild(); 向一个父节点中添加一个新的子节点：父节点.appendChild(子节点);
        li.appendChild(gzText);

        var city = document.getElementById("city");
        city.appendChild(li);
    });

    myClick('btn02', function () {
        var li = document.createElement("li");
        var gzText = document.createTextNode("广州");
        li.appendChild(gzText);

        var bj = document.getElementById("bj");

        // insertBefore(); 在指定的子节点前面插入新的子节点，说明，该方法是由他们共同的父节点调用的.父节点.insertBefore(新节点，旧节点);
        var city = document.getElementById("city");
        city.insertBefore(li, bj);
    });

    myClick('btn03', function () {
        var li = document.createElement("li");
        var gzText = document.createTextNode("广州");
        li.appendChild(gzText);
        var bj = document.getElementById("bj");

        // replaceChild(); 可以使用指定的子节点替换已有的子节点。父节点.replaceChild(新节点，旧节点)
        var city = document.getElementById("city");
        city.replaceChild(li, bj);
    });

    myClick('btn04', function () {
        var bj = document.getElementById("bj");

        // removeChild(); 可以删除一个子节点。父节点.removeChild(子节点)
        // var city = document.getElementById("city");
        // 动态获取bj节点的父节点 bj.parentNode

        bj.parentNode.removeChild(bj);
    });

    myClick('btn05', function () {
        var city = document.getElementById("city");
        console.log(city.innerHTML);
    });

    myClick('btn06', function () {
        var bj = document.getElementById("bj");
        bj.innerHTML = '朝阳';
    });

    myClick('btn07', function () {

        // 使用innerHtml也可以完成dom的一些增删改的操作，这种方式是将整个city下的子节点全部删除，然后在全部增加进来，动静比较大,如果之前绑定过事件，则会失效
        // 不推荐单独使用
        var city = document.getElementById("city");
        // city.innerHTML += '<li>广州</li>'


        // 建议和btn01的方案结合使用
        var li = document.createElement("li");
        li.innerHTML = '广州';
        city.appendChild(li);

    });

    
    function myClick(id, fun) {
        var btn = document.getElementById(id);
        btn.onclick = fun;
    }

</script>
</body>
</html>